import {
  StyleSheet, Text, View
} from 'react-native';
import react, { useState, useEffect } from 'react';
import { TouchableOpacity } from 'react-native';

const Btn = ({ style, font, children, ...rest }) => {
  return (
    <TouchableOpacity
      {...rest}
      style={
        [{ alignItems: 'center', justifyContent: 'center' }, style
        ]}
    // onPress={()=>{console.log(1234)}}
    >
      <Text style={font}>{children}</Text>
    </TouchableOpacity>
  )
}
export default function App() {

  return (
    <View style={styles.container}>
      <Btn
        // 实际起作用的是上面生成的那个组件，那个组件没有事件所以不能点击出效果,
        // 可以在上面写函数，也可以用...rest来绑定剩余的函数
        onPress={()=>{console.log(123456)}}
        style={{ width: 300, height: 50, backgroundColor: 'red', borderRadius: 25 }}
        font={{ color: 'white', fontSize: 20 }}
      >
        自定义按钮
      </Btn>
      {/* activeOpacity={0.5}按钮点击时会产生透明度 */}
      <TouchableOpacity activeOpacity={0.5}>
        <Text >ffffffffffff</Text>
      </TouchableOpacity>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 15,
    marginTop: 15,
    width: '70%'
  },
  font: {
    color: '#fca',
    fontSize: 32
  }
});
